/* eslint no-undef: 0 */
/* eslint arrow-parens: 0 */
import React from 'react';
import { enquireScreen } from 'enquire-js';

import Banner from './Banner';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3';
import Page4 from './Page4';
import Page5 from './Page5';
import Page6 from './Page6';

import YModel from './Model';

// import './less/antMotionStyle.less';

let isMobile;
enquireScreen((b) => {
  isMobile = b;
});

const { location } = window;

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      visibleType: 0,
      isMobile,
      show: !location.port, // 如果不是 dva 2.0 请删除
    };
  }

  componentDidMount() {
    // 适配手机屏幕;
    enquireScreen((b) => {
      this.setState({ isMobile: !!b });
    });
    // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响；
    /* 如果不是 dva 2.0 请删除 start */
    if (location.port) {
      // 样式 build 时间在 200-300ms 之间;
      setTimeout(() => {
        this.setState({
          show: true,
        });
      }, 500);
    }
    /* 如果不是 dva 2.0 请删除 end */
  }

  handleModalVisible = (visibleType = 1) => {
    let flag = {}
    if(!isNaN(visibleType)) {
      flag = {
        visibleType
      }
    }
    this.setState(state => ({
      ...state,
      visible: !state.visible,
      ...flag,
    }));
  }

  render() {
    const children = [
      <Banner
        id="banner"
        key="banner"
        isMobile={this.state.isMobile}
        handleModalVisible={this.handleModalVisible.bind(this, 0)}
      />,
      <Page1
        id="page1"
        key="page1"
        isMobile={this.state.isMobile}
      />,
      <Page2
        id="page2"
        key="page2"
        isMobile={this.state.isMobile}
        handleModalVisible={this.handleModalVisible.bind(this, 0)}
      />,
      <Page3
        id="page3"
        key="page3"
        isMobile={this.state.isMobile}
      />,
      <Page4
        id="page4"
        key="page4"
        isMobile={this.state.isMobile}
      />,
      <Page5
        id="page5"
        key="page5"
        isMobile={this.state.isMobile}
      />,
      <Page6
        id="page6"
        key="page6"
        isMobile={this.state.isMobile}
        handleModalVisible={this.handleModalVisible.bind(this, 0)}
      />,
    ];

    const { visible, visibleType } = this.state
    const payload = {
      visible,
      visibleType,
      handleModalVisible: this.handleModalVisible
    }

    return (
      <>
        <YModel {...payload} />
        <div
          className="templates-wrapper"
          style={{marginTop: -140}}
          ref={(d) => {
            this.dom = d;
          }}
        >        
          {/* 如果不是 dva 2.0 替换成 {children} start */}
          {this.state.show && children}
          {/* 如果不是 dva 2.0 替换成 {children} end */}
        </div>
      </>
    );
  }
}
